<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline">
    <div class="form-group">
        <label for="category_level_1">一级分类</label>
        <!--一级分类-->
        <select name="category_level_1" id="category_level_1"  class="form-control">
            <option value="">请选择分类</option>
        </select>
    </div>

    <div class="form-group">
        <label for="category_level_2">二级分类</label>
        <select name="category_level_2" id="category_level_2"  class="form-control">
            <option value="">请选择分类</option>
        </select>
    </div>

    <div class="form-group">
        <label for="category_level_3">三级分类</label>
        <select name="category_level_3" id=category_level_3  class="form-control">
            <option value="">请选择分类</option>
        </select>
    </div>
</form>


<script src="/static/jquery-3.1.1.min.js"></script>

<script>
    $(function () {
        // 去请求分类
        // 页面加载的时候、请求一级分类
        getCategory(0,$('#category_level_1'));
        // 绑定内容改变事件(一级分类、二级分类绑定、三级分类不需求)
        $('#category_level_1,#category_level_2').change(function () {
            let pid = $(this).val();
            getCategory(pid,$(this))
        })
        /**
         *
         * @param pid 父级id
         * @param that_ 当前是哪个对象
         */
        function getCategory(pid,that_) {
            // 发送请求
            $.ajax({
                url:'/mulitlevel/getCategory-v2?pid=' + pid,
                dataType:'json',
                success:function (response) {
                    let op = ''
                    $.each(response.data,function (i,v) {
                        op += " <option value='" + v.id +"'>" + v.cate_name +  "</option>";
                    });
                    // 如果是一级分类 追加到二级分类下面
                    if(pid == 0) {
                        that_.append(op);
                    } else {
                        // 如果是二级分类、追加到三级分类
                        that_.parent().next().find('select').append(op)
                    }

                }
            })
        }
    })
</script>
</body>
</html>